import React, { Component } from 'react';
import {
    ScrollView,
    View,
    RefreshControl
} from 'react-native';

import IndexSwiper from "../components/IndexSwiper/index";
import MainTitle from "../components/MainTitle/index";
import RecomCourseList from "../components/RecomCourseList/index";
import CourseList from "../components/CourseList/index";
import IndexModel from "../models/Index"
const indexModel = new IndexModel()

export default class HomePage extends Component {

    constructor(props) {
        super(props);
        this.state = {
           swipersData: [],
           fieldsData: [],
           coursesData: [],
           recomCoursesData: [],
           isRefreshing: false
        };
    }
    getCourseDatas () {
        indexModel.getCourseDatas().then(res => {
            const data = res.result;
            this.setState({
                swipersData: data.swipers,
                fieldsData: this.handleFields(data.fields, data.courses),
                coursesData: data.courses,
                recomCoursesData: data.recomCourses
            })
            if(this.state.isRefreshing){
                this.setState({
                isRefreshing: false
                })
            }
        })
    }
    handleFields(fields, courses){
        let fieldsObj = {}
        for(let i = 0; i < fields.length; i++) {
            fields[i].courses = []
            fieldsObj[fields[i].field] = fields[i]
        }
        for(let i = 0; i < courses.length; i++) {
            fieldsObj[courses[i].field].courses.push(courses[i])
        }
        let resultFields = []
        for (const key in fieldsObj) {
            resultFields.push(fieldsObj[key])
        }
        return resultFields;
    }
    onPageRefresh () {
        if(this.state.isRefreshing){
            return
        }
        this.setState({
            swipersData: [],
            fieldsData: [],
            coursesData: [],
            recomCoursesData: [],
            isRefreshing: true
        })
        this.getCourseDatas()
    }

    componentDidMount () {
        this.getCourseDatas()
    }
    render() {
        const {navigation} = this.props;
        const {swipersData, recomCoursesData, fieldsData, isRefreshing} = this.state;
        return (
            <ScrollView
                automaticallyAdjustContentInsets={false}
                showsVerticalScrollIndicator={false}
                refreshControl={
                    <RefreshControl
                        refreshing={isRefreshing}
                        onRefresh={this.onPageRefresh.bind(this)}
                        title="加载中..."
                        titleColor="#666666"
                        tintColor="#666666"
                    />
                }
            >
                <IndexSwiper swiperData={swipersData} navigation={navigation}/>
                <MainTitle
                    title="推荐课程"
                    key={"-1"}
                />
                <RecomCourseList
                    recomCoursesData={recomCoursesData}
                    navigation={navigation}
                />
                {
                    fieldsData.map((fieldData) => {
                        return(
                            <View key={fieldData.field}>
                                <MainTitle
                                    title={fieldData.field_name}
                                    key={fieldData.field+"B"}
                                />
                                <CourseList
                                    coursesData={fieldData.courses}
                                    navigation={navigation}
                                    key={fieldData.field+"A"}
                                />
                            </View>
                        )
                    })
                }
            </ScrollView>
        );
    }
    
}

